<template>
  <div id="order-list">
<!-- 头部 -->
<div class="header w100p bg-fff flex fdc jc-sb">
      <div class="div1 f18 flex aic">
          <p class="pl-20">&lt;</p>
          <p class="p1 fg1">确认订单</p>
      </div>
      <img src="@/assets/img/xian.png" alt="">
      <div class="div2 flex jc-sb aic ml-20 mr-20">
          <p class="p2">
              <i class="iconfont icon-yuejuan_Location"></i>
              <span class="pl-10">请选择地址</span>
          </p>
          <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
      </div>
  </div>
  <!-- 中间 -->
  <div class="center w100p ">
    <!-- 中间上部分 -->
    <div class="top pl-15 pr-15 bg-fff">
        <p class="textcolor f14 mb-10">运费0元(满200免运费)</p>
        <div class="top-p1">
            <ul class="list">
                <li class="item flex aic">
                    <img src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png" >
                    <div class="fg1 ml-10 flex fdc jc-sb">
                        <p class="flex fdc jc-sb">
                            <span>A级-阳光冬枣(中)约2.6-3斤</span>
                            <span class="f14 textcolor">皮薄圆润均匀 肉厚鲜嫩脆甜 现摘现发</span>
                        </p>
                        <p class="flex jc-sb">
                            <span>&yen;35<text class="f12">.80</text></span>
                            <span class="f12 textcolor">x3</span>
                        </p>
                    </div>
                </li>
                <li class="item flex aic">
                    <img src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png">
                    <div class="fg1 ml-10 flex fdc jc-sb">
                        <p class="flex fdc jc-sb">
                            <span>A级-阳光冬枣(中)约2.6-3斤</span>
                            <span class="f14 textcolor">皮薄圆润均匀 肉厚鲜嫩脆甜 现摘现发</span>
                        </p>
                        <p class="flex jc-sb">
                            <span>&yen;35<text class="f12">.80</text></span>
                            <span class="f12 textcolor">x3</span>
                        </p>
                    </div>
                </li>
                <li class="item flex aic">
                    <img src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png" >
                    <div class="fg1 ml-10 flex fdc jc-sb">
                        <p class="flex fdc jc-sb">
                            <span>A级-阳光冬枣(中)约2.6-3斤</span>
                            <span class="f14 textcolor">皮薄圆润均匀 肉厚鲜嫩脆甜 现摘现发</span>
                        </p>
                        <p class="flex jc-sb">
                            <span>&yen;35<text class="f12">.80</text></span>
                            <span class="f12 textcolor">x3</span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <p class="flex jc-sb aic mt-10 mb-10">
            <span class="textcolor f14">商品总金额</span>
            <span class="base f14">&yen;436.80</span>
        </p>
        <p class="flex jc-sb aic mt-10 pb-10">
            <span class="textcolor f14">运费</span>
            <span class="base f14">&yen;0</span>
        </p>
    </div>
  <!-- 中间下部分 -->
  <div class="buttom w100p mt-15 mb-15 bg-fff">
    <ul class="list">
        <li class="item flex jc-sb aic pl-15 pr-15">
            <p class="but-p1 f16">
                <b class="base"><i class="iconfont icon-iconfontfankui"></i></b>
                <span>优惠券</span>
            </p>
            <p class="f14 textcolor">
                <span>0张劵可用</span>
                <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
            </p>
        </li>
        <li class="item flex jc-sb aic pl-15 pr-15">
            <p class="but-p1 f16">
                <b class="base"><i class="iconfont icon-iconfontfankui"></i></b>
                <span>苏打劵</span>
            </p>
            <p class="f14 textcolor">
                <span>0张劵可用</span>
                <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
            </p>
        </li>
        <li class="item flex jc-sb aic pl-15 pr-15">
            <p class="but-p1 f16">
                <b class="base"><i class="iconfont icon-qianbao"></i></b>
                <span>余额</span>
            </p>
            <p class="f14 textcolor">
                <span class="base">&yen;0.00</span>
                <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
            </p>
        </li>
        <li class="item flex jc-sb aic pl-15 pr-15">
            <p class="but-p1 f16">
                <b class="base"><i class="iconfont icon-1111113"></i></b>
                <span>发票</span>
            </p>
            <p class="f14 textcolor">
                <span>不开发票</span>
                <i class="iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
            </p>
        </li>
    </ul>
  </div>
</div>
  <!-- 底部 -->
  <div class="footer w100p bg-fff fixed flex aic">
      <p class="fg1 pr-10"><span class="f14 pr-5">合计:</span><span class="base">&yen;436.<text class="f12">80</text></span></p>
      <button class=" btn fff bg-base mr-20">提交订单</button>
  </div>
  </div>      
        
</template>

<script>
export default {

}
</script>

<style lang="less">
@import './orderList.less';
</style>